:root {
  --main-bg-color: #fff;
  --secondary-bg-color: #666666;
  --button-text-color: #606266;
  --button-active-bg-color: #ecf5ff;
  --button-active-text-color: #409eff;
  --text-color: #606266;
  --border-color: #dcdfe6;
  --toolbar-border-color: #dcdfe6;
  --placeholder-text-color: #333;
  --placeholder-bg-color: #fff;
  --actived-text-color: #409eff;
  --actived-bg-color: #ecf5ff;
  --ace-bg-color: #e4e7ed;
  --disable-text-color: #c0c4cc;
  --disable-border-color: #ebeef5;
  --dropdown-border-color: #e4e7ed;
}

.screen-edit {
  overflow: hidden;

  .attr-list {
    overflow: auto;
    padding: 10px 0;
    height: calc(100vh - 120px);
    font-size: 13px;
    .el-collapse-item {
      padding: 0 10px;
    }
  }

  > .title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .el-collapse-item__content {
    padding-bottom: 0;
  }

  .v-common-attr {
    padding: 0 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #dce3f3;

    .el-form {
      padding: 0 10px 10px 10px;
    }
    .el-collapse-item__header {
      height: 30px;
      line-height: 30;
      border: none;
    }
    .el-collapse,
    .el-collapse-item__wrap {
      border: none;
    }
    .el-collapse-item:last-child {
      margin: 0;
    }
  }

  .el-dialog {
    background: var(--main-bg-color);

    .el-dialog__title {
      color: var(--text-color);
    }
  }

  .el-form-item__label,
  .el-radio__label {
    font-size: 12px;
  }
}

.el-tabs {
  height: 100%;
}

.el-dropdown {
  color: var(--text-color);
}

.el-tabs__content {
  height: calc(100% - 55px);
  overflow: auto;
}

.el-tabs__nav-scroll {
  padding-left: 20px;
}

.el-tabs__header {
  margin: 0;
}

.el-tag {
  text-align: right;
}

.el-checkbox__inner {
  background-color: var(--placeholder-bg-color);
}

.component-wrap {
  position: relative;
  overflow: hidden;
  .tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 16px;
  }
}

.form-item-flex {
  .el-form-item__content {
    display: flex;
    align-items: center;
    .flex-item {
      margin-right: 10px;
    }
  }
}
.align-radio {
  .is-active {
    .svg-icon {
      fill: #fff;
    }
  }
  fill: #666;
}
.checkbox-style-btn {
  &.is-checked {
    .svg-icon {
      fill: #fff;
    }
  }
  fill: #666;
}
